<template>
  <div class="work-calendar">
    <el-row type="flex" justify="end">
      <el-select v-model="currentYear" size="small" style="width: 120px">
        <el-option v-for="item in yearList" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
      <el-select v-model="currentMonth" size="small" style="width: 120px; margin-left: 10px">
        <el-option v-for="item in 12" :key="item" :label="item" :value="item">{{ item }}</el-option>
      </el-select>
    </el-row>
    <el-calendar v-model="currentDate">
      <div class="date-content">
        <span class="text"> xxx </span>
        <span class="rest">休</span>
      </div>
    </el-calendar>
  </div>
</template>

<script>
export default {
  props: {
    startDate: {
      type: Date,
      default: () => new Date()
    }
  },
  data() {
    return {
      currentMonth: null, // 当前月份
      currentYear: null, // 当前年份
      currentDate: null,
      yearList: []
    }
  }
}
</script>

<style scoped lang="scss">
  .work-calendar {
    ::v-deep {
      .el-calendar-day {
        height: auto;
      }

      .el-calendar-table__row td,
      .el-calendar-table tr td:first-child,
      .el-calendar-table__row td.prev {
        border: none;
      }

      .el-calendar-table td.is-selected .text {
        background: #409eff;
        color: #fff;
        border-radius: 50%;
      }

      .el-calendar__header {
        display: none;
      }
    }
  }

  .date-content {
    height: 40px;
    text-align: center;
    line-height: 40px;
    font-size: 14px;

    .rest {
      color: #fff;
      border-radius: 50%;
      background: rgb(250, 124, 77);
      width: 20px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
      font-size: 12px;
      margin-left: 10px;
    }

    .text {
      width: 20px;
      height: 20px;
      line-height: 20px;
      display: inline-block;
    }
  }
</style>
